<template>
  <div class="ai-prompt">
    <div class="ai-prompt-text">
      <div class="ai-icon">
        <!-- 可以使用AI相关图标 -->
        <!-- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 14V17H22V19H19V22H17V19H14V17H17V14H19Z" fill="#4F46E5" />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12 2C6.48 2 2 6.48 2 12C2 14.4 2.85 16.6 4.26 18.33C3.33 17.1 2.76 15.63 2.52 14H4.04C4.26 15.03 4.74 15.97 5.41 16.77C4.87 16.25 4.39 15.67 3.99 15.04C5.55 17.24 8.04 18.5 11 18.5C11.36 18.5 11.72 18.48 12.08 18.44C11.72 19.43 11.03 20.27 10.13 20.84C10.41 20.94 10.7 21 11 21C13.76 21 16 18.76 16 16V11C16 8.24 13.76 6 11 6C8.24 6 6 8.24 6 11V12.5H4V11C4 7.13 7.13 4 11 4C14.87 4 18 7.13 18 11V16C18 17.93 17.21 19.68 15.92 20.94C17.19 20.5 18 19.31 18 18V14H12V12H20V18C20 20.21 18.21 22 16 22H11C6.03 22 2 17.97 2 13C2 7.48 6.48 3 12 3C17.52 3 22 7.48 22 13V14H20V13C20 8.58 16.42 5 12 5Z"
            fill="#4F46E5"
          />
        </svg> -->
        <img src="/icon/ai.webp" alt="" />
      </div>
      <div class="ai-prompt-body">请根据提示信息输入</div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.ai-prompt {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --ai-primary: #4f46e5;
  --ai-primary-light: #6366f1;
  --ai-bg: #f9fafb;
  --ai-text: #1f2937;
  --ai-border: #e5e7eb;
  --ai-hover: #ede9fe;
}

.ai-prompt-text {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--ai-border);
  color: var(--ai-text);
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  background-image: linear-gradient(97deg, #f2f9fe 0%, #f7f3ff 100%);
  border-start-start-radius: 4px;
}

.ai-icon {
  margin-right: 14px;
  img {
    width: 42px;
    height: 42px;
  }
}

.ai-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ai-prompt-body {
  flex: 1;
  line-height: 1.6;
  font-weight: 500;
}

.ai-prompt-body:empty::before {
  content: attr(placeholder);
  color: #9ca3af;
  pointer-events: none;
}

/* 聚焦状态 */
.ai-prompt-text:focus-within {
  background-color: white;
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* 动画效果 */
@keyframes ai-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.ai-prompt.waiting .ai-icon {
  animation: ai-pulse 1.5s ease-in-out infinite;
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    --ai-bg: #1e1e2d;
    --ai-text: #e5e7eb;
    --ai-border: #3e3e4d;
    --ai-hover: #2e2d3d;
  }
}
</style>
